<template>
  <el-container class="widt">
    <el-container>
      <el-aside :width="isclose?'64px':'190px'" class="transion">
        <el-menu
          :default-active="demo"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select='fn'
        >
          <el-menu-item  v-for="(item,index) in path" :key='item.path' :index="index+''">
            <i :class="icon[index]" ></i>
            <span :class="{trans:isclose}" >{{item.meta.name}}</span>
          </el-menu-item>
          <!-- <el-menu-item index="1" >
            <i class="el-icon-location"></i>
            <span :class="{trans:isclose}">数据可视化</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>
      <el-main>
        <slot name='router-view'></slot>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import Bus from '_utils/eventbus'
// import router from '../../router'
export default {
  data () {
    return {
      isclose: false,
      input: '',
      isee: false,
      path: '',
      arr: [], // 匹配路由数组
      icon: ['el-icon-location', 'el-icon-menu', 'el-icon-document', 'el-icon-chat-dot-square', 'el-icon-setting']
    }
  },
  created () {
    this.getRouter()
  },
  mounted () {
    Bus.$on('close', function (msg) {
      this.isclose = msg
    }.bind(this))
  },
  methods: {
    con () {
      console.log(333)
    },
    fn (a) {
      this.$store.commit('change', a + '')
      this.$router.push(this.path[a])
    },
    // 获取路由地址
    getRouter () {
      // 获取二级路由
      this.path = this.$router.options.routes[2].children.splice(1).filter(item => item.meta.isNav)
      const roles = localStorage.getItem('roles')
      this.path = this.path.filter(item => item.meta.roles.includes(roles))
      this.arr = this.path.map(item => {
        return item.path
      })
    },
    // 点击展开导航栏
    seeNav (value) {
      this.isclose = !value
    },
    // 点击显示输入框
    see (value) {
      this.isee = !value
      console.log(this.isee)
    },
    handleOpen () {},
    handleClose () {}
  },
  computed: {
    demo () {
      return this.arr.indexOf(this.$route.path) + ''
    }
  }

}
</script>

<style lang="scss" scoped>
.widt{
  height: 100vh;
  // background-color: pink;
}
.flex{
  display: flex;
}
.padd_10{
  padding-right: 10px;
}
.wid_40{
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.trans{
  color: transparent;
}
.transion{
  transition:  all 1s;
}
.el-menu{
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-main{
  padding: 0;
  .el-header{
    padding: 8px;
    display: flex;
    background-color: rgb(221, 213, 215);
    justify-content: space-between;
    align-items: center;
    .left{
      display: flex;
      align-items: center;
    }
    .right{
      display: flex;
      align-items: center;
      /deep/.el-input__inner{
        background:none;
        outline:none;
        border:none;
        border-bottom: 1px solid #CCC;
        img{
          width: 40px;
          height: 40px;
        }
      }
      .el-dropdown-link {
        cursor: pointer;
        color: #18191a;
      }
      .el-icon-arrow-down {
        font-size: 16px;
        font-weight: 700;
        align-self: flex-end;
      }
    }
  }
}
</style>
